import 'package:flutter/material.dart';
import 'package:flutter_app/components/noticebar.dart';
import 'package:flutter_app/components/radiusContainer.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/pages/lever/index.dart';
import 'package:flutter_app/utils/AppUtil.dart';
import './bottom.dart';
// import './otc.dart';
import './Defi.dart';
import 'package:flutter_app/components/layout.dart';
import './fund.dart';
import './carousel.dart';
import 'package:flutter_app/generated/l10n.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

Widget Title(String name) {
  return Text(name,
      style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500));
}

Widget SubTitle(String name) {
  return Text(name, style: TextStyle(color: Colors.grey, fontSize: 13));
}

class MyIcons {
  // 礼物图标
  static const Icon gift = const Icon(
      IconData(0xe620, fontFamily: 'iconfont', matchTextDirection: true),
      color: Colors.blue,
      size: 20.0);
}

class HotModuleInfo {
  String text;
  String url;
  Widget icon;

  HotModuleInfo({this.text, this.url, this.icon});
}

class _HomePageState extends State<HomePage> {
  String currentChanelId = '1';

  void onSelectChannel(id) {
    setState(() {
      this.currentChanelId = id;
    });
  }

  @override
  Widget build(BuildContext context) {
    List<HotModuleInfo> HOT_MODULES = [
      //双币投资
      HotModuleInfo(
          text: S.of(context).home_dual,
          url: "/double",
          icon: Image.asset(
            "assets/images/ic_product_list_time_deposit.png",
            width: 50,
          )),
      HotModuleInfo(
          text: 'DeFi',
          url: '',
          icon: Image.asset(
            "assets/images/ic_product_list_wealth.png",
            width: 50,
          )),
      //趋势智盈
      HotModuleInfo(
          text: S.of(context).trend,
          url: '',
          icon: Image.asset(
            "assets/images/ic_product_list_time_deposit.png",
            width: 50,
          )),
      //固收
      HotModuleInfo(
          text: S.of(context).fixed,
          url: '/fixed',
          icon: Image.asset(
            "assets/images/ic_product_list_time_deposit.png",
            width: 50,
          )),
      //基金
      HotModuleInfo(
          text:  S.of(context).fund,
          url: '/fund',
          icon: Image.asset(
            "assets/images/ic_product_list_triple_bull.png",
            width: 50,
          )),
      //借贷
      HotModuleInfo(
          text: S.of(context).lend,
          url: '/loan',
          icon: Image.asset(
            "assets/images/ic_product_list_triple_bull.png",
            width: 50,
          )),
      //杠杆交易
      HotModuleInfo(
          text: S.of(context).lever,
          url: '/lever',
          icon: Image.asset(
            "assets/images/ic_product_list_triple_bull.png",
            width: 50,
          )),
      //尊享
      HotModuleInfo(
          text: S.of(context).premium,
          url: '',
          icon: Image.asset(
            "assets/images/ic_product_list_triple_bull.png",
            width: 50,
          )),
    ];
    openPage(url) {
      Navigator.pushNamed(context, url);
    }

    List<Widget> getHotModuleNode() {
      return HOT_MODULES.map((item) {
        return GestureDetector(
          onTap: () => openPage(item.url),
          child: Container(
            width: (MediaQuery.of(context).size.width - 40) / 4,
            child: Column(
              children: [
                item.icon,
                SizedBox(height: 5),
                Text(
                  item.text,
                  style: TextStyle(fontSize: 12),
                )
              ],
            ),
          ),
        );
      }).toList();
    }

    //双币投资的列表
    Widget getDoubleCoinContainer(String item) {
      return GestureDetector(
        onTap: () => Navigator.pushNamed(context, '/double/list'),
        child: Container(
          width: (MediaQuery.of(context).size.width / 2) - 35,
          padding: EdgeInsets.all(10.0),
          alignment: Alignment.topLeft,
          decoration: BoxDecoration(
            color: Colors.grey.withOpacity(0.1),
            image: DecorationImage(
                alignment: Alignment(0.9, 0.5),
                image: AssetImage("assets/images/ic_usd_btc.png"),
                fit: BoxFit.scaleDown,
                scale: 2.7),
          ),
          child: ColumnStart(
            children: [
              Text(
                S.of(context).dual_ccy_coin('BTC '),
                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 15),
              ),
              Text('105.85%',
                  style: TextStyle(
                      color: Colors.blueAccent,
                      fontSize: 18,
                      fontWeight: FontWeight.bold)),
              Text(
                //赚币止盈
                S.of(context).link_price1("BTC"),
                style: TextStyle(color: Colors.grey, fontSize: 12),
              ),
            ],
          ),
        ),
      );
    }

    List<Widget> getDoubleCoinList() {
      return ['1', '1', '1', '1']
          .map((item) => getDoubleCoinContainer(item))
          .toList();
    }

    //杠杆交易的按钮
    Widget LeverButton(String imgUrl, String text) {
      return Container(
        height: 33,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          image: DecorationImage(
            // alignment: Alignment(0.9, 0.5),
            image: AssetImage(imgUrl),
            fit: BoxFit.contain,
          ),
        ),
        child: Text(
          text,
          style: TextStyle(color: Colors.white),
        ),
      );
    }

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.dark,
      child: SafeArea(
        child: Column(
          children: [
            Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 15.0, vertical: 15.0),
              child: RowBetween(
                children: [
                  Image.asset(
                    "assets/images/ic_home_header_logo.png",
                    width: 100,
                  ),
                  Row(
                    children: [
                      //指数
                      Text(
                        'BTC ' + S.of(context).index,
                        style: TextStyle(color: Colors.grey),
                      ),
                      Text(
                        ' \$' + AppUtil.formatNum(53611.79, point: 2),
                        style: TextStyle(
                          color: Colors.blueAccent,
                          fontWeight: FontWeight.bold,
                        ),
                      )
                    ],
                  )
                ],
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.blueAccent.withOpacity(0.04),
                child: RefreshIndicator(
                  onRefresh: () async {},
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        Container(
                          color: Colors.white,
                          child: Column(
                            children: [
                              //轮播
                              Carousel(),
                              //公告
                              Padding(
                                padding: const EdgeInsets.symmetric(
                                    horizontal: 15.0),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: [
                                    Icon(
                                      Icons.volume_up,
                                      color: Colors.blueAccent,
                                    ),
                                    Expanded(child: NoticeBar()),
                                  ],
                                ),
                              ),
                              //hot module
                              Column(
                                children: [
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 15, horizontal: 0),
                                    child: Wrap(
                                        runSpacing: 15,
                                        children: getHotModuleNode()),
                                  )
                                ],
                              ),
                            ],
                          ),
                        ),
                        //
                        Container(
                          margin: EdgeInsets.symmetric(
                              horizontal: 15.0, vertical: 15.0),
                          child: Column(
                            children: [
                              HomeFundModule(),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                children: [
                                  Expanded(
                                    //双币投资
                                    child: RadiusContainer(
                                        radius: 5.0,
                                        child: ColumnStart(
                                          children: [
                                            ColumnStart(
                                              children: [
                                                Title(
                                                  // 双币投资
                                                  S.of(context).home_dual_title,
                                                ),
                                                SubTitle(S.of(context).home_dual_subtitle),
                                              ],
                                            ),
                                            SizedBox(height: 15),
                                            Image.asset(
                                              "assets/images/ic_home_reinvest_banner_en.png",
                                            ),
                                            SizedBox(height: 10),
                                            Wrap(
                                                direction: Axis.horizontal,
                                                spacing: 10,
                                                runSpacing: 10,
                                                children: getDoubleCoinList()),
                                            SizedBox(
                                              height: 15,
                                            ),
                                            Padding(
                                              padding:
                                                  const EdgeInsets.symmetric(
                                                      vertical: 5.0),
                                              child: RowBetween(children: [
                                                Row(
                                                  crossAxisAlignment: CrossAxisAlignment.center,
                                                  children: [
                                                    Image.asset(
                                                        'assets/images/coins/ic_eth_small.png',
                                                        width: 15),
                                                    SizedBox(width: 5),
                                                    Text(
                                                      S.of(context).dual_ccy_coin('ETH')+S.of(context).rank,
                                                      style: TextStyle(
                                                          color: Colors.grey,fontSize: 12),
                                                    ),
                                                    Text(
                                                      ' \$2,400',
                                                      style: TextStyle(
                                                          color: Colors.black,
                                                          fontWeight:
                                                              FontWeight.w500),
                                                    )
                                                  ],
                                                ),
                                                Row(
                                                  crossAxisAlignment: CrossAxisAlignment.center,
                                                  children: [
                                                    Text(
                                                      //全部
                                                      S.of(context).all,
                                                      style: TextStyle(
                                                          color: Colors.grey,fontSize: 12),
                                                    ),
                                                    Icon(
                                                      Icons.arrow_forward_ios,
                                                      size: 14,
                                                      color: Colors.grey,
                                                    )
                                                  ],
                                                )
                                              ]),
                                            )
                                          ],
                                        )),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Row(
                                children: [
                                  Expanded(
                                    child: RadiusContainer(
                                      radius: 5.0,
                                      child: ColumnStart(children: [
                                        ColumnStart(children: [
                                          Title(
                                            //杠杆交易
                                            S.of(context).lever,
                                          ),
                                          SubTitle(S.of(context).home_lever_sub),
                                        ]),
                                        SizedBox(height: 15.0),
                                        Row(
                                          children: [
                                            Expanded(
                                              child: RowBetween(children: [
                                                Text('1.1X',
                                                    style: TextStyle(
                                                        fontSize: 15,
                                                        fontWeight:
                                                            FontWeight.w500)),
                                                Expanded(
                                                  child: Container(
                                                    child: Stack(
                                                      children: [
                                                        Positioned(
                                                          top: 15,
                                                          left: 0,
                                                          right: 0,
                                                          child: Container(
                                                            height: 4,
                                                            margin: EdgeInsets
                                                                .symmetric(
                                                                    horizontal:
                                                                        10.0),
                                                            color:
                                                                Colors.black26,
                                                          ),
                                                        ),
                                                        Center(
                                                          child: Image.asset(
                                                            "assets/images/ic_home_leverage_indicator.png",
                                                            width: 25,
                                                          ),
                                                        ),
                                                      ],
                                                    ),
                                                  ),
                                                ),
                                                Text('5.0X',
                                                    style: TextStyle(
                                                        fontSize: 15,
                                                        fontWeight:
                                                            FontWeight.w500)),
                                              ]),
                                            ),
                                          ],
                                        ),
                                        SizedBox(height: 15.0),
                                        RowBetween(children: [
                                          Expanded(
                                            child: GestureDetector(
                                                onTap: () {
                                                  Navigator.push(context,
                                                      MaterialPageRoute(
                                                          builder: (context) {
                                                    return LeverPage(type: 1);
                                                  }));
                                                },
                                                child: LeverButton(
                                                    "assets/images/bg_home_leveraged_short.9.png",
                                                    S.of(context).short)),
                                          ),
                                          Expanded(
                                            child: GestureDetector(
                                              onTap: () {
                                                Navigator.push(context,
                                                    MaterialPageRoute(
                                                        builder: (context) {
                                                  return LeverPage(type: 0);
                                                }));
                                              },
                                              child: LeverButton(
                                                  "assets/images/bg_home_leveraged_long.9.png",
                                                  S.of(context).long),
                                            ),
                                          ),
                                        ])
                                      ]),
                                    ),
                                  ),
                                ],
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              DefiModule(),
                              SizedBox(
                                height: 10,
                              ),
                              // OtcModule(),
                              // ReportModule(),
                              BottomModule()
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
